<template>
  <div class="Head">
    <div class="change">请选择UU跑腿业务</div>
    <div class="close">
      <router-link class="item" to="/Wap" active-class="selected">
        <img src="../assets/关闭按钮@2x.png" alt />
      </router-link>
    </div>
    <div class="content1">
      <div class="content1_img">
        <img src="../assets/帮我买@2x.png" alt />
      </div>
      <div class="content_right">
        <div class="content_right_top">帮我买</div>
        <div class="content_right_bottom">不止美食 啥都能买，不止美食，啥都能买，不止3公里，购遍全城</div>
      </div>
    </div>

    <div class="content2">
      <div class="content1_img">
        <img src="../assets/帮我送@2x.png" alt />
      </div>
      <div class="content_right">
        <div class="content_right_top">帮我送</div>
        <div class="content_right_bottom">文件、礼品、数码、珠宝</div>
      </div>
    </div>

    <div class="content3">
      <div class="content1_img">
        <img src="../assets/帮我取@2x.png" alt />
      </div>
      <div class="content_right">
        <div class="content_right_top">帮我取</div>
        <div class="content_right_bottom">文件、手机、证件、珠宝、珠宝、手机、全城分钟送达</div>
      </div>
    </div>

    <div class="content4">
      <div class="content1_img">
        <img src="../assets/帮我排队@2x.png" alt />
      </div>
      <div class="content_right">
        <div class="content_right_top">帮我排队</div>
        <div class="content_right_bottom">餐厅、买房、行政排队、购房排队、医院挂号、高校省时办事快</div>
      </div>
    </div>

    <div class="content5">
      <div class="content1_img">
        <img src="../assets/u种兵@2x.png" alt />
      </div>
      <div class="content_right">
        <div class="content_right_top">Office专送</div>
        <div class="content_right_bottom">
          黑衣人专送，
          只为跟高端的您
        </div>
      </div>
    </div>

    <div class="content6">
      <div class="content1_img">
        <img src="../assets/u种兵@2x.png" alt />
      </div>
      <div class="content_right">
        <div class="content_right_top">U种兵专送</div>
        <div class="content_right_bottom">特种兵服务 使命，高效，安全</div>
      </div>
    </div>

    <div class="content7">
      <div class="content1_img">
        <img src="../assets/帮我买@2x.png" alt />
      </div>
      <div class="content_right">
        <div class="content_right_top">帮我买</div>
        <div class="content_right_bottom">不止美食 啥都能买，不止美食，啥都能买，不止3公里，购遍全城</div>
      </div>
    </div>

    <div class="content8">
      <div class="content1_img">
        <img src="../assets/帮我买@2x.png" alt />
      </div>
      <div class="content_right">
        <div class="content_right_top">帮我买</div>
        <div class="content_right_bottom">不止美食 啥都能买，不止美食，啥都能买，不止3公里，购遍全城</div>
      </div>
    </div>

    <div class="content9">
      <div class="content1_img">
        <img src="../assets/帮我买@2x.png" alt />
      </div>
      <div class="content_right">
        <div class="content_right_top">帮我买</div>
        <div class="content_right_bottom">不止美食 啥都能买，不止美食，啥都能买，不止3公里，购遍全城</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Last"
};
</script>

<style scoped lang="less">
.Head {
  position: absolute;
  width: 100vw;
  height: 100vh;
  // border: 1px solid red ;
  background: #f5f5f5;
  overflow: hidden;
  overflow-y: scroll;

  .change {
    position: absolute;
    width: 100vw;
    height: 15vw;
    // border: 1px solid red ;
    font-size: 8vw;
    color: #1a1a1a;
    line-height: 15vw;
    margin-left: 2vw;
    font-weight: bold;
  }
  .close {
    position: absolute;
    width: 10vw;
    height: 12vw;
    // border: 1px solid blue ;
    margin-top: 2.5vw;
    margin-left: 83vw;
    img {
      display: block;
      margin: 0 auto;
      margin-top: 2.5vw;
      width: 5vw;
      margin-right: -2vw;
    }
  }

  .content1 {
    position: absolute;
    width: 95vw;
    height: 21vw;
    // border: 1px solid blue ;
    margin-top: 21vw;
    background: #ffff;
    border-radius: 3px;
    margin-left: 2vw;

    .content1_img {
      position: absolute;
      width: 10vw;
      height: 7vw;
      // border: 1px solid red ;
      margin-top: 7.5vw;
      margin-left: 2vw;

      img {
        display: block;
        margin-top: -2.5vw;
        // margin-left: -2.5vw;
        width: 10vw;
        height: 10vw;
      }
    }

    .content_right {
      position: absolute;
      width: 80vw;
      height: 21vw;
      // border: 1px solid blue ;
      // margin-top: 2vh;
      margin-left: 15vw;

      .content_right_top {
        position: absolute;
        width: 25vw;
        height: 8vw;
        // border: 1px solid red ;
        // margin-top: 0vh;
        margin-left: 2vw;
        font-size: 5vw;
        color: #6666;
        // text-align: center;
        line-height: 9vw;
        font-weight: bold;
      }

      .content_right_bottom {
        position: absolute;
        width: 80vw;
        height: 14vw;
        // border: 1px solid red ;
        margin-top: 7vw;
        margin-left: 1vw;
        font-size: 4vw;
        color: #9999;
        // text-align: center;
        line-height: 3vh;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .content1 {
    position: absolute;
    width: 95vw;
    height: 21vw;
    // border: 1px solid blue ;
    margin-top: 21vw;
    background: #ffff;
    border-radius: 3px;
    margin-left: 2vw;

    .content1_img {
      position: absolute;
      width: 10vw;
      height: 7vw;
      // border: 1px solid red ;
      margin-top: 7.5vw;
      margin-left: 2vw;

      img {
        display: block;
        margin-top: -2.5vw;
        // margin-left: -2.5vw;
        width: 10vw;
        height: 10vw;
      }
    }

    .content_right {
      position: absolute;
      width: 80vw;
      height: 21vw;
      // border: 1px solid blue ;
      // margin-top: 2vh;
      margin-left: 15vw;

      .content_right_top {
        position: absolute;
        width: 25vw;
        height: 8vw;
        // border: 1px solid red ;
        // margin-top: 0vh;
        margin-left: 2vw;
        font-size: 5vw;
        color: #6666;
        // text-align: center;
        line-height: 9vw;
        font-weight: bold;
      }

      .content_right_bottom {
        position: absolute;
        width: 80vw;
        height: 14vw;
        // border: 1px solid red ;
        margin-top: 7vw;
        margin-left: 1vw;
        font-size: 4vw;
        color: #9999;
        // text-align: center;
        line-height: 3vh;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .content2 {
    position: absolute;
    width: 95vw;
    height: 21vw;
    // border: 1px solid blue ;
    margin-top: 44vw;
    background: #ffff;
    border-radius: 3px;
    margin-left: 2vw;

    .content1_img {
      position: absolute;
      width: 10vw;
      height: 7vw;
      // border: 1px solid red ;
      margin-top: 7.5vw;
      margin-left: 2vw;

      img {
        display: block;
        margin-top: -2.5vw;
        // margin-left: -2.5vw;
        width: 10vw;
        height: 10vw;
      }
    }

    .content_right {
      position: absolute;
      width: 80vw;
      height: 21vw;
      // border: 1px solid blue ;
      // margin-top: 2vh;
      margin-left: 15vw;

      .content_right_top {
        position: absolute;
        width: 25vw;
        height: 8vw;
        // border: 1px solid red ;
        // margin-top: 0vh;
        margin-left: 2vw;
        font-size: 5vw;
        color: #6666;
        // text-align: center;
        line-height: 9vw;
        font-weight: bold;
      }

      .content_right_bottom {
        position: absolute;
        width: 80vw;
        height: 14vw;
        // border: 1px solid red ;
        margin-top: 7vw;
        margin-left: 1vw;
        font-size: 4vw;
        color: #9999;
        // text-align: center;
        line-height: 3vh;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .content3 {
    position: absolute;
    width: 95vw;
    height: 21vw;
    // border: 1px solid blue ;
    margin-top: 67vw;
    background: #ffff;
    border-radius: 3px;
    margin-left: 2vw;

    .content1_img {
      position: absolute;
      width: 10vw;
      height: 7vw;
      // border: 1px solid red ;
      margin-top: 7.5vw;
      margin-left: 2vw;

      img {
        display: block;
        margin-top: -2.5vw;
        // margin-left: -2.5vw;
        width: 10vw;
        height: 10vw;
      }
    }

    .content_right {
      position: absolute;
      width: 80vw;
      height: 21vw;
      // border: 1px solid blue ;
      // margin-top: 2vh;
      margin-left: 15vw;

      .content_right_top {
        position: absolute;
        width: 25vw;
        height: 8vw;
        // border: 1px solid red ;
        // margin-top: 0vh;
        margin-left: 2vw;
        font-size: 5vw;
        color: #6666;
        // text-align: center;
        line-height: 9vw;
        font-weight: bold;
      }

      .content_right_bottom {
        position: absolute;
        width: 80vw;
        height: 14vw;
        // border: 1px solid red ;
        margin-top: 7vw;
        margin-left: 1vw;
        font-size: 4vw;
        color: #9999;
        // text-align: center;
        line-height: 3vh;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .content4 {
    position: absolute;
    width: 95vw;
    height: 21vw;
    // border: 1px solid blue ;
    margin-top: 90vw;
    background: #ffff;
    border-radius: 3px;
    margin-left: 2vw;

    .content1_img {
      position: absolute;
      width: 10vw;
      height: 7vw;
      // border: 1px solid red ;
      margin-top: 7.5vw;
      margin-left: 2vw;

      img {
        display: block;
        margin-top: -2.5vw;
        // margin-left: -2.5vw;
        width: 10vw;
        height: 10vw;
      }
    }

    .content_right {
      position: absolute;
      width: 80vw;
      height: 21vw;
      // border: 1px solid blue ;
      // margin-top: 2vh;
      margin-left: 15vw;

      .content_right_top {
        position: absolute;
        width: 25vw;
        height: 8vw;
        // border: 1px solid red ;
        // margin-top: 0vh;
        margin-left: 2vw;
        font-size: 5vw;
        color: #6666;
        // text-align: center;
        line-height: 9vw;
        font-weight: bold;
      }

      .content_right_bottom {
        position: absolute;
        width: 80vw;
        height: 14vw;
        // border: 1px solid red ;
        margin-top: 7vw;
        margin-left: 1vw;
        font-size: 4vw;
        color: #9999;
        // text-align: center;
        line-height: 3vh;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .content5 {
    position: absolute;
    width: 95vw;
    height: 21vw;
    // border: 1px solid blue ;
    margin-top: 113vw;
    background: #ffff;
    border-radius: 3px;
    margin-left: 2vw;

    .content1_img {
      position: absolute;
      width: 10vw;
      height: 7vw;
      // border: 1px solid red ;
      margin-top: 7.5vw;
      margin-left: 2vw;

      img {
        display: block;
        margin-top: -2.5vw;
        // margin-left: -2.5vw;
        width: 10vw;
        height: 10vw;
      }
    }

    .content_right {
      position: absolute;
      width: 80vw;
      height: 21vw;
      // border: 1px solid blue ;
      // margin-top: 2vh;
      margin-left: 15vw;

      .content_right_top {
        position: absolute;
        width: 25vw;
        height: 8vw;
        // border: 1px solid red ;
        // margin-top: 0vh;
        margin-left: 2vw;
        font-size: 5vw;
        color: #6666;
        // text-align: center;
        line-height: 9vw;
        font-weight: bold;
      }

      .content_right_bottom {
        position: absolute;
        width: 80vw;
        height: 14vw;
        // border: 1px solid red ;
        margin-top: 7vw;
        margin-left: 1vw;
        font-size: 4vw;
        color: #9999;
        // text-align: center;
        line-height: 3vh;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .content6 {
    position: absolute;
    width: 95vw;
    height: 21vw;
    // border: 1px solid blue ;
    margin-top: 136vw;
    background: #ffff;
    border-radius: 3px;
    margin-left: 2vw;

    .content1_img {
      position: absolute;
      width: 10vw;
      height: 7vw;
      // border: 1px solid red ;
      margin-top: 7.5vw;
      margin-left: 2vw;

      img {
        display: block;
        margin-top: -2.5vw;
        // margin-left: -2.5vw;
        width: 10vw;
        height: 10vw;
      }
    }

    .content_right {
      position: absolute;
      width: 80vw;
      height: 21vw;
      // border: 1px solid blue ;
      // margin-top: 2vh;
      margin-left: 15vw;

      .content_right_top {
        position: absolute;
        width: 25vw;
        height: 8vw;
        // border: 1px solid red ;
        // margin-top: 0vh;
        margin-left: 2vw;
        font-size: 5vw;
        color: #6666;
        // text-align: center;
        line-height: 9vw;
        font-weight: bold;
      }

      .content_right_bottom {
        position: absolute;
        width: 80vw;
        height: 14vw;
        // border: 1px solid red ;
        margin-top: 7vw;
        margin-left: 1vw;
        font-size: 4vw;
        color: #9999;
        // text-align: center;
        line-height: 3vh;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .content7 {
    position: absolute;
    width: 95vw;
    height: 21vw;
    // border: 1px solid blue ;
    margin-top: 159vw;
    background: #ffff;
    border-radius: 3px;
    margin-left: 2vw;

    .content1_img {
      position: absolute;
      width: 10vw;
      height: 7vw;
      // border: 1px solid red ;
      margin-top: 7.5vw;
      margin-left: 2vw;

      img {
        display: block;
        margin-top: -2.5vw;
        // margin-left: -2.5vw;
        width: 10vw;
        height: 10vw;
      }
    }

    .content_right {
      position: absolute;
      width: 80vw;
      height: 21vw;
      // border: 1px solid blue ;
      // margin-top: 2vh;
      margin-left: 15vw;

      .content_right_top {
        position: absolute;
        width: 25vw;
        height: 8vw;
        // border: 1px solid red ;
        // margin-top: 0vh;
        margin-left: 2vw;
        font-size: 5vw;
        color: #6666;
        // text-align: center;
        line-height: 9vw;
        font-weight: bold;
      }

      .content_right_bottom {
        position: absolute;
        width: 80vw;
        height: 14vw;
        // border: 1px solid red ;
        margin-top: 7vw;
        margin-left: 1vw;
        font-size: 4vw;
        color: #9999;
        // text-align: center;
        line-height: 3vh;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .content8 {
    position: absolute;
    width: 95vw;
    height: 21vw;
    // border: 1px solid blue ;
    margin-top: 182vw;
    background: #ffff;
    border-radius: 3px;
    margin-left: 2vw;

    .content1_img {
      position: absolute;
      width: 10vw;
      height: 7vw;
      // border: 1px solid red ;
      margin-top: 7.5vw;
      margin-left: 2vw;

      img {
        display: block;
        margin-top: -2.5vw;
        // margin-left: -2.5vw;
        width: 10vw;
        height: 10vw;
      }
    }

    .content_right {
      position: absolute;
      width: 80vw;
      height: 21vw;
      // border: 1px solid blue ;
      // margin-top: 2vh;
      margin-left: 15vw;

      .content_right_top {
        position: absolute;
        width: 25vw;
        height: 8vw;
        // border: 1px solid red ;
        // margin-top: 0vh;
        margin-left: 2vw;
        font-size: 5vw;
        color: #6666;
        // text-align: center;
        line-height: 9vw;
        font-weight: bold;
      }

      .content_right_bottom {
        position: absolute;
        width: 80vw;
        height: 14vw;
        // border: 1px solid red ;
        margin-top: 7vw;
        margin-left: 1vw;
        font-size: 4vw;
        color: #9999;
        // text-align: center;
        line-height: 3vh;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.content9 {
  position: absolute;
  width: 95vw;
  height: 21vw;
  // border: 1px solid blue ;
  margin-top: 205vw;
  background: #ffff;
  border-radius: 3px;
  margin-left: 2vw;

  .content1_img {
    position: absolute;
    width: 10vw;
    height: 7vw;
    // border: 1px solid red ;
    margin-top: 7.5vw;
    margin-left: 2vw;

    img {
      display: block;
      margin-top: -2.5vw;
      // margin-left: -2.5vw;
      width: 10vw;
      height: 10vw;
    }
  }

  .content_right {
    position: absolute;
    width: 80vw;
    height: 21vw;
    // border: 1px solid blue ;
    // margin-top: 2vh;
    margin-left: 15vw;

    .content_right_top {
      position: absolute;
      width: 25vw;
      height: 8vw;
      // border: 1px solid red ;
      // margin-top: 0vh;
      margin-left: 2vw;
      font-size: 5vw;
      color: #6666;
      // text-align: center;
      line-height: 9vw;
      font-weight: bold;
    }

    .content_right_bottom {
      position: absolute;
      width: 80vw;
      height: 14vw;
      // border: 1px solid red ;
      margin-top: 7vw;
      margin-left: 1vw;
      font-size: 4vw;
      color: #9999;
      // text-align: center;
      line-height: 3vh;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>